<script setup>
const alerts = [
  { time: '14:30:10', content: '大棚1温度异常', status: '未处理' },
  { time: '14:30:20', content: '大棚1温度异常', status: '未处理' },
  { time: '14:30:30', content: '大棚1温度异常', status: '未处理' },
  { time: '14:30:40', content: '大棚1温度异常', status: '未处理' },
  { time: '14:30:50', content: '大棚1温度异常', status: '未处理' }
]
</script>

<template>
  <div class="panel">
    <div class="panel-header">告警信息</div>
    <div class="alert-list">
      <div class="alert-item" v-for="alert in alerts" :key="alert.time">
        <span class="alert-time">{{ alert.time }}</span>
        <span class="alert-content">{{ alert.content }}</span>
        <span class="alert-status warning">{{ alert.status }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.alert-list {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.alert-item {
  padding: 10px;
  border-bottom: 1px solid rgba(0,183,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alert-time {
  color: #30f3f9;
}

.alert-status {
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.alert-status.warning {
  background: rgba(255,153,0,0.2);
  color: #ff9900;
}

::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,183,255,0.2);
  border-radius: 3px;
}
</style> 